<template>
  <div class="seachbox">
    <div class="seach">
      <el-form :inline="true" size="medium" :model="form" class="demo-form-inline">
        <el-form-item v-for="(item,index) in formInline" :key="index" :label="item.label" v-show="!item.hide" >
           <el-input style="width:160px" v-if="item.type=='input'" v-model="form[item.value]" :placeholder="item.placeholder||'请输入'"></el-input>
            <el-select style="width:160px" v-if="item.type=='select'&&item.hasGroup" clearable v-show="!item.hide" v-model="form[item.value]" placeholder="请选择">
              <el-option-group   v-for="(group,idx) in item.options" :key="idx" :label="group[item.defaultProp&&item.defaultProp.length?item.defaultProp[1]:'name']">
                 <el-option v-for="(ele,ind) in group[item.defaultProp&&item.defaultProp.length?item.defaultProp[2]:'children']" :key="ind" :label="ele[item.defaultProp&&item.defaultProp.length?item.defaultProp[1]:'name']" 
                  :value="ele[item.defaultProp&&item.defaultProp.length?item.defaultProp[0]:'id']">
                </el-option>
              </el-option-group>
            </el-select>
            <el-select style="width:160px" v-if="item.type=='select'&&(!item.hasGroup)" v-show="!item.hide" clearable v-model="form[item.value]" placeholder="请选择">
                <el-option  v-for="(ele,ind) in item.options" :key="ind" :label="ele[item.defaultProp&&item.defaultProp.length?item.defaultProp[1]:'name']" 
                  :value="ele[item.defaultProp&&item.defaultProp.length?item.defaultProp[0]:'id']">
                </el-option>
            </el-select>
            <el-input style="width:160px" readonly ref="showPeople" v-if="item.type=='people'" v-model="form[item.value]" :placeholder="item.placeholder||'请输入'" @focus.stop="showPeople(item.value,'showPeople');">
              <i class="el-icon-arrow-down" slot="suffix" width='25px' style="margin:7px 5px 0 0"></i>
            </el-input>
            <el-input style="width:160px" readonly ref="showDept" v-if="item.type=='dept'" v-model="form[item.value]" :placeholder="item.placeholder||'请输入'" @focus.stop="showDept(item.value,'showDept');">
              <i class="el-icon-arrow-down" slot="suffix" width='25px' style="margin:7px 5px 0 0"></i>
            </el-input>
            <el-date-picker v-show="!item.hide" style="width:350px" v-if="item.type=='daterange'" v-model="form[item.value]" type="daterange" value-format="yyyy-MM-dd" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
            <el-select style="width:160px" v-if="item.type=='selectTree'" v-show="!item.hide" clearable v-model="form[item.value]" placeholder="请选择">
                <!-- <el-option  v-for="(ele,ind) in item.options" :key="ind" :label="ele[item.defaultProp&&item.defaultProp.length?item.defaultProp[1]:'name']" 
                  :value="ele[item.defaultProp&&item.defaultProp.length?item.defaultProp[0]:'id']">
                </el-option> -->
              <el-option class="newOption" ref="optionTree" :label="item.name" :value="form[item.value]" >
                <el-tree :data="item.options"  :props="item.treeProp" accordion @node-click="handleNodeClick($event,index,item.value)">
                </el-tree>
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
          <div class="btnOfSearch">
              <el-button type="primary" v-show="!hideSearchBtn" icon="el-icon-search" @click="$emit('search',form,peopleArr,deptArr)">搜索</el-button>
              <slot></slot>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="btnOfSearch" style="margin-left:0">
              <slot name="defaultBtn"></slot>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
/* eslint-disable */
import {complexPicker,departmentsPicker} from "@/libs/utils" /**封装选部门方法 */
export default {
    props:['formInline','form','hideSearchBtn'],
  data() {
    return {
      people_ids:'',
      peopleArr:[],
      deptIds:'',
      deptArr:[]
    };
  },
  mounted() {},
  methods: {
      onSubmit(){

      },
      init(){
          this.people_ids = '',
          this.peopleArr = [],
          this.deptIds = '',
          this.deptArr = []
      },
      /**选负责人 */
      showPeople(value){
          this.$refs.showPeople?this.$refs.showPeople[0].blur():''
          let that = this
          complexPicker(that,{bool:true,useridArr:that.people_ids?that.people_ids.split(','):[]},function(res){
              that.form[value] = res.userArr
              that.people_ids=res.user_id
              that.peopleArr = res.users
          })
      },
      /*下拉树结构点击选中当前option*/
      handleNodeClick(node,i,value){
          this.$refs.optionTree[0].$el.click()
          this.form[value] = node.name
      },
      /**选部门 */
      showDept(value){
          this.$refs.showDept?this.$refs.showDept[0].blur():''
          let that = this
          departmentsPicker(that,{pickedDepartments:that.deptIds?that.deptIds.split(','):[]},function(res){
              that.form[value] = res.deptArr
              that.deptIds=res.dept_id
              that.deptArr = res.departments
          })
      },
  }
};
</script>
<style lang="stylus" scoped>
.seachbox 
    background-color #fff
    margin-bottom 20px
    .btnOfSearch
      display flex
      align-items center
      margin-left 20px
    .seach
        border-radius 3px
        background-color rgba(243, 245, 247, 1)
        border 1px solid rgba(255, 0, 0, 0)
        padding 25px 0 0 25px
    .newOption
        height: auto;
        max-height: 274px;
        padding: 0;
        overflow: hidden;
        overflow-y: auto;
</style>
<style lang="stylus">
.seachbox 
  .el-button
    width 87px
    height 36px
    padding 10px 0
    border-radius 3px
    text-align: center
    border 1px solid rgba(255, 0, 0, 0)
  .el-button--primary
    background-color rgba(54, 154, 255, 1)
  .el-button--success
    background-color rgba(136, 191, 74, 1)
  .el-button+.el-button
    margin-left 25px
    
</style>